<template>
	<el-dialog
		:title="titleMap[mode]"
		v-model="visible"
		:width="700"
		destroy-on-close
		append-to-body
		@closed="emits('closed')"
	>
		<el-form
			:model="form"
			:rules="rules"
			ref="dialogForm"
			label-width="80px"
			:style="'el-dialog' === 'el-drawer' ? 'padding:0 20px' : ''"
		>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="所属客户" prop="suo_shu_ke_hu">
						<el-input v-model="form.suo_shu_ke_hu" clearable placeholder="请输入所属客户"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品名称" prop="shp_ming_cheng">
						<el-input v-model="form.shp_ming_cheng" clearable placeholder="请输入商品名称"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="商品简称" prop="shp_jian_cheng">
						<el-input v-model="form.shp_jian_cheng" clearable placeholder="请输入商品简称"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品型号" prop="shp_xing_hao">
						<el-input v-model="form.shp_xing_hao" clearable placeholder="请输入商品型号"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="商品规格" prop="shp_gui_ge">
						<el-input v-model="form.shp_gui_ge" clearable placeholder="请输入商品规格"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品颜色" prop="shp_yan_se">
						<el-color-picker v-model="form.shp_yan_se" :predefine="proxy.$CONFIG.COLOR_LIST"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="产品属性" prop="chp_shu_xing">
						<el-select v-model="form.chp_shu_xing" style="width:100%" clearable placeholder="请选择产品属性">

							<el-option
								v-for="(item, index) in dictData.wms_goods_cate"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="存放温层" prop="cf_wen_ceng">
						<el-select v-model="form.cf_wen_ceng" style="width:100%" clearable placeholder="请选择存放温层">

							<el-option
								v-for="(item, index) in dictData.wms_goods_env"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="拆零控制" prop="chl_kong_zhi">
						<el-input v-model="form.chl_kong_zhi" clearable placeholder="请输入拆零控制"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="码盘单层数量" prop="mp_dan_ceng">
						<el-input v-model="form.mp_dan_ceng" clearable placeholder="请输入码盘单层数量"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="码盘层高" prop="mp_ceng_gao">
						<el-input v-model="form.mp_ceng_gao" clearable placeholder="请输入码盘层高"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="计费商品类" prop="jf_shp_lei">
						<el-input v-model="form.jf_shp_lei" clearable placeholder="计费商品类"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="商品品牌" prop="shp_pin_pai">
						<el-input v-model="form.shp_pin_pai" clearable placeholder="请输入商品品牌"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品条码" prop="shp_tiao_ma">
						<el-input v-model="form.shp_tiao_ma" clearable placeholder="请输入商品条码"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="品牌图片" prop="pp_tu_pian">
						<sc-upload v-model="form.pp_tu_pian" title="选择品牌图片" file-select/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="保质期" prop="bzhi_qi">
						<el-input v-model="form.bzhi_qi" clearable placeholder="请输入保质期"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="单位" prop="shl_dan_wei">
						<el-select v-model="form.shl_dan_wei" style="width:100%" clearable placeholder="请选择单位">

							<el-option
								v-for="(item, index) in dictData.wsm_goods_unit"
								:key="index" :label="item.label"
								:value="item.value"
							>{{ item.label }}
							</el-option>

						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="拆零单位" prop="jsh_dan_wei">
						<el-input v-model="form.jsh_dan_wei" clearable placeholder="请输入拆零单位"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="体积" prop="ti_ji_cm">
						<el-input v-model="form.ti_ji_cm" clearable placeholder="请输入体积"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="净重" prop="zhl_kg">
						<el-input v-model="form.zhl_kg" clearable placeholder="请输入净重"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="拆零数量" prop="chl_shl">
						<el-input v-model="form.chl_shl" clearable placeholder="请输入拆零数量"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="件数与体积比" prop="jti_ji_bi">
						<el-input v-model="form.jti_ji_bi" clearable placeholder="请输入件数与体积比"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="件数与毛重比" prop="jm_zhong_bi">
						<el-input v-model="form.jm_zhong_bi" clearable placeholder="请输入件数与毛重比"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="件数与净重比" prop="jj_zhong_bi">
						<el-input v-model="form.jj_zhong_bi" clearable placeholder="请输入件数与净重比"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="尺寸单位" prop="chc_dan_wei">
						<el-input v-model="form.chc_dan_wei" clearable placeholder="请输入尺寸单位"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="长单品" prop="ch_dan_pin">
						<el-input v-model="form.ch_dan_pin" clearable placeholder="请输入长单品"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="宽单品" prop="ku_dan_pin">
						<el-input v-model="form.ku_dan_pin" clearable placeholder="请输入宽单品"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="高单品" prop="gao_dan_pin">
						<el-input v-model="form.gao_dan_pin" clearable placeholder="请输入高单品"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="长整箱" prop="ch_zh_xiang">
						<el-input v-model="form.ch_zh_xiang" clearable placeholder="请输入长整箱"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="宽整箱" prop="ku_zh_xiang">
						<el-input v-model="form.ku_zh_xiang" clearable placeholder="请输入宽整箱"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="高整箱" prop="gao_zh_xiang">
						<el-input v-model="form.gao_zh_xiang" clearable placeholder="请输入高整箱"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品描述" prop="shp_miao_shu">
						<el-input v-model="form.shp_miao_shu" clearable placeholder="请输入商品描述"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="毛重" prop="zhl_kgm">
						<el-input v-model="form.zhl_kgm" clearable placeholder="请输入毛重"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品客户编码" prop="SHP_BIAN_MAKH">
						<el-input v-model="form.SHP_BIAN_MAKH" clearable placeholder="请输入商品客户编码"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="基准温度" prop="JIZHUN_WENDU">
						<el-input v-model="form.JIZHUN_WENDU" clearable placeholder="请输入基准温度"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="最小库存" prop="min_stock">
						<el-input v-model="form.min_stock" clearable placeholder="请输入最小库存"/>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="状态" prop="status">
						<el-switch v-model="form.status" :active-value="proxy.$CONFIG.SWITCH.ENABLE"
											 :inactive-value="proxy.$CONFIG.SWITCH.DISABLE"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="排序" prop="sort">
						<el-input v-model="form.sort" clearable placeholder="请输入排序"/>
					</el-form-item>
				</el-col>
			</el-row>


		</el-form>
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {ref, reactive, defineExpose, onMounted, getCurrentInstance} from 'vue'
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'
import wmsMdGoods from '@/api/apis/wms/wmsMdGoods'
import systemDict from '@/api/apis/system/dataDict'


const emits = defineEmits(['success', 'closed'])
const {proxy} = getCurrentInstance();
const router = useRouter();

const mode = ref('add')
const treeList = ref([])
const visible = ref(false)
const isSaveing = ref(false)
const dialogForm = ref(null)

const titleMap = reactive({add: '新增商品', edit: '编辑商品'})
const dictData = reactive({
	wms_goods_cate: [],
	wms_goods_env: [],
	wms_goods_cate: [],
	wsm_goods_unit: [],
	platform_data_status: [],

})
const form = reactive({
	id: '',
	suo_shu_ke_hu: '',
	shp_ming_cheng: '',
	shp_jian_cheng: '',
	shp_bian_ma: '',
	shp_xing_hao: '',
	shp_gui_ge: '',
	shp_yan_se: proxy.$TOOL.data.get('APP_COLOR') || proxy.$CONFIG.COLOR || '#536dfe',
	chp_shu_xing: '1',
	cf_wen_ceng: '1',
	chl_kong_zhi: '',
	mp_dan_ceng: '',
	mp_ceng_gao: '',
	jf_shp_lei: '',
	shp_pin_pai: '',
	shp_tiao_ma: '',
	pp_tu_pian: '',
	bzhi_qi: '',
	shl_dan_wei: '1',
	jsh_dan_wei: '',
	ti_ji_cm: '',
	zhl_kg: '',
	chl_shl: '',
	jti_ji_bi: '',
	jm_zhong_bi: '',
	jj_zhong_bi: '',
	chc_dan_wei: '',
	ch_dan_pin: '',
	ku_dan_pin: '',
	gao_dan_pin: '',
	ch_zh_xiang: '',
	ku_zh_xiang: '',
	gao_zh_xiang: '',
	shp_miao_shu: '',
	zhl_kgm: '',
	SHP_BIAN_MAKH: '',
	JIZHUN_WENDU: '',
	min_stock: '',
	status: proxy.$CONFIG.SWITCH.ENABLE,
	sort: '0',
	mer_id: '0',

})
const rules = reactive({
	shp_ming_cheng: [{required: true, message: '商品名称必填', trigger: 'blur'}],
	shp_bian_ma: [{required: true, message: '商品编码必填', trigger: 'blur'}],
	chp_shu_xing: [{required: true, message: '产品属性必填', trigger: 'blur'}],
	cf_wen_ceng: [{required: true, message: '存放温层必填', trigger: 'blur'}],
	// jf_shp_lei: [{required: true, message: '计费商品类必填', trigger: 'blur'}],

})

onMounted(async () => {
	await getDictData()
	if (router.currentRoute.value.query.open) {
		open('add');
	}
})

const getDictData = () => {
	systemDict.getDict('wms_goods_cate').then(res => {
		dictData.wms_goods_cate = res.data
	})
	systemDict.getDict('wms_goods_env').then(res => {
		dictData.wms_goods_env = res.data
	})
	systemDict.getDict('wms_goods_cate').then(res => {
		dictData.wms_goods_cate = res.data
	})
	systemDict.getDict('wsm_goods_unit').then(res => {
		dictData.wsm_goods_unit = res.data
	})
	systemDict.getDict('platform_data_status').then(res => {
		dictData.platform_data_status = res.data
	})

}

const open = (type = 'add') => {
	mode.value = type
	visible.value = true

}

const submit = () => {
	dialogForm.value.validate(async (valid) => {
		if (valid) {
			isSaveing.value = true
			const res = mode.value === 'add' ? await wmsMdGoods.save(form) : await wmsMdGoods.update(form.id, form)
			if (res.success) {
				emits('success', form, mode.value)
				visible.value = false
				ElMessage.success(res.message)
			} else {
				ElMessage.error(res.message)
			}
			isSaveing.value = false
		}
	})
}

const setData = (data) => {
	for (let k in form) {
		if (data[k] || data[k] === 0) {
			form[k] = data[k]
		}
	}
}


defineExpose({
	open, setData
})
</script>
